<script setup lang="ts">
import * as echarts from "echarts";
import {onMounted, ref} from "vue";

let lineChartRef = ref();
onMounted(() => {
  let lineChart = echarts.init(lineChartRef.value);
  lineChart.setOption({
    title: {
      text: '游客访问趋势'
    },
    grid: {
      top: 0,
      bottom: 210,
      left: 40,
      right: 0
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // 两边不留白
      // 分割线
      splitLine: {
        show: false
      },
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // 轴线
      axisLine: {
        show: true
      },
      // 刻度
      axisTick: {
        show: true
      }
    },
    yAxis: {
      splitLine: {
        show: false
      },
      // 轴线
      axisLine: {
        show: true
      },
      // 刻度
      axisTick: {
        show: true
      }
    },
    series: [{
      type: 'line',
      data: [123, 189, 245, 157, 260, 150, 323],
      smooth: true, //平滑曲线
      // 区域填充样式
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
          }, {
            offset: 1, color: 'skyblue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    }]
  })
})
</script>

<template>
  <div class="line">
    <div class="title">未来30天预测图</div>
    <div class="chart" ref="lineChartRef"></div>
  </div>
</template>

<style scoped lang="scss">
.line {
  flex: 1.3;
  background-color: hotpink;
  margin: 10px;

  .title {
    font-size: 20px;
    color: white;
  }

  .chart {
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>